<!-- 申请入驻-第三步企业信息 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :current="2" active-color="#03B8CD" :list="stepsList" mode="number" v-show="enterCode !== 'mine'">
		</u-steps>

		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">

				<u-field v-model="form.companyName" label="企业名称：" label-width="160" prop="companyName" placeholder="请输入企业经营所用名称"
					:placeholder-style="placeholderStyle" :required="required">
				</u-field>
				
				<u-field v-model="form.businessType" label="经营类型：" label-width="160" prop="companyName" placeholder="请选择企业经营类型"
					:placeholder-style="placeholderStyle" @click="isShowPicker(0)">
				</u-field>

				<!-- 经营状态 -->
				<u-field v-model="form.businessStatus" label="经营状态：" label-width="160" placeholder="请选择企业经营状态"
					:placeholder-style="placeholderStyle" @click="isShowPicker(1)">
				</u-field>

				<!-- 经营地址 -->
				<u-field v-model="form.businessAddress" label="经营地址：" label-width="160" placeholder="请选择省-市-区县"
					:placeholder-style="placeholderStyle" @click="isShowPicker(2)">
				</u-field>

				<!-- 详细地址 -->
				<u-field v-model="form.detailAddress" label="详细地址：" label-width="160" placeholder="实际经营的详细地址"
					:placeholder-style="placeholderStyle">
				</u-field>

				<!-- 企业介绍 -->
				<view class="introduction">
					<view class="header">
						<text class="title">企业介绍</text>
					</view>
					<view class="textarea-container">
						<u-input v-model="introduction" type="textarea" placeholder="请输入企业介绍内容" height="300" maxlength="1000"
							@input="handleInput" :clearable="clearable" />
						<view class="word-count">
							{{ currentCount }}/1000
						</view>
					</view>
				</view>


				<!-- 企业Logo-->
				<view class="upload-section">
					<text class="upload-title">Logo（企业logo，1:1尺寸）</text>
					<!-- 					<u-upload :file-list="PhotosListLogo" @on-list-change="PhotoReadLogo"
						@on-remove="(e) => photoLogoDelete(e, index)" multiple max-count="1" upload-text="上传照片"></u-upload> -->
					<!-- 图片上传开始 -->
					<view class="upload-area" @click="chooseImage('logo')">
						<!-- 显示上传的图片 -->
						<image v-if="PhotosListLogo" :src="PhotosListLogo" mode="aspectFill" class="preview-image"
							@click.stop="previewImageLogo">
						</image>
						<!-- 上传按钮图标（无图片时显示） -->
						<view v-else class="upload-btn">
							<u-icon name="photo" color="#b6b6b6" size="38"></u-icon>
							<text class="upload-text">点击上传图片</text>
							<!-- 							<text class="upload-tip">仅支持JPG/PNG格式，大小不超过2MB</text> -->
						</view>
						<!-- 删除按钮（有图片时显示） -->
						<view v-if="PhotosListLogo" class="delete-btn" @click.stop="deleteImageLogo">
							<u-icon name="close" color="#ffffff" size="32"></u-icon>
						</view>
					</view>
					<!-- 图片上传结束-->
				</view>

				<!-- 门头照上传 -->
				<view class="upload-section">
					<text class="upload-title">门头照（企业门头照或企业前台）</text>
<!-- 					<u-upload :file-list="PhotosListTitle" @on-list-change="PhotoReadTitle"
						@on-remove="(e) => photoTitleDelete(e, index)" multiple max-count="1" upload-text="上传照片"></u-upload> -->
					<!-- 图片上传开始 -->
					<view class="upload-area" @click="chooseImage('title')">
						<!-- 显示上传的图片 -->
						<image v-if="PhotosListTitle" :src="PhotosListTitle" mode="aspectFill" class="preview-image"
							@click.stop="previewImageTitle">
						</image>
						<!-- 上传按钮图标（无图片时显示） -->
						<view v-else class="upload-btn">
							<u-icon name="photo" color="#b6b6b6" size="38"></u-icon>
							<text class="upload-text">点击上传图片</text>
							<!-- 							<text class="upload-tip">仅支持JPG/PNG格式，大小不超过2MB</text> -->
						</view>
						<!-- 删除按钮（有图片时显示） -->
						<view v-if="PhotosListTitle" class="delete-btn" @click.stop="deleteImageTitle">
							<u-icon name="close" color="#ffffff" size="32"></u-icon>
						</view>
					</view>
					<!-- 图片上传结束-->	
				</view>

				<!-- 企业环境 -->
				<!-- 				<view class="upload-section">
					<text class="upload-title">企业环境（可传0~5张）</text>
					<u-upload :file-list="PhotosList" @on-list-change="PhotoReadEnv" @on-remove="(e) => photoListDelete(e, index)" multiple
						max-count="5" upload-text="上传照片"></u-upload>
				</view> -->


				<!-- 企业环境图片上传按钮 -->
				<view class="upload-section">
					<text class="upload-title">企业环境（可传0~5张）</text>
					<view class="upload-btn" @click="chooseImage('env')">
						<u-icon name="photo" color="#b6b6b6" size="36"></u-icon>
						<text>添加图片</text>
					</view>
					<!-- 图片列表 -->
					<view class="image-list">
						<view v-for="(item, index) in PhotosList" :key="index" class="image-item">
							<image :src="item" mode="aspectFill" @click="previewImage(index)" class="image"></image>
							<view class="delete-btn" @click.stop="deleteImage(index)">
								<u-icon name="close" color="#ffffff" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>

			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject" v-show="enterCode !== 'mine'">
					上一步
				</u-button>
				<u-button type="primary" @click="handleSubmit" shape="circle" :custom-style="btuStyle" :loading="loading">
					提交
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				enterCode:'',  ////是哪个页面跳转过来的
				imageList: [], // 存储图片临时路径
				showStatus: 0, ////是否重新加载页面内容
				loading: false,
				clearable: false,
				// showBusinessTypePicker: false,
				// showAddressPicker: false,
				// 临时存储照片-Loog，门头照，环境照
				PhotosListLogo: '', ///存储Logo url
				PhotosListTitle: '', ///存储门头照片 url
				PhotosList: [], ///存储门店环境照片0~5张 url

				base64Data: '', // 图片存储转换后的Base64数据
				photo_base_info_logo: '', ///存储服务器返回图片的ID-Logo code
				photo_base_info_title: '', ///存储服务器返回图片的ID-title code
				photo_base_info_env: [], ///存储服务器返回图片的ID-env,0-5张 code
				
				photo_prview_all: [], ///主要用于预览所有图片
				// 步骤条
				stepsList: [{
						name: "手机号"
					},
					{
						name: "营业执照"
					},
					{
						name: "企业信息"
					}
				],
				// 弹出窗口内容
				show: false,
				mode: "selector",
				range: ['有限责任公司', '股份有限公司', '个体工商户', '其他'],
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					color:"#03B8CD"
				},
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				loginPhone: '', ///修改登录时手机号 
				form: {
					companyName: '',
					businessType: '',
					businessStatus: '营业中',
					businessAddress: '',
					detailAddress: ''
				},
				// 企业介绍输入框
				introduction: '',
				currentCount: 0,
				maxCount: 1000,
				// 验证
				rules: {
					companyName: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}]
				},
				flowid: '' //、、企业的flowid
			}
		},
		onLoad(options) {
			// this.loginPhone = options.phoneno
			this.enterCode = options.enterCode
			console.log('encode:', this.enterCode)
		},
		onShow() {	
			// 获取企业信息
			this.getQyxx()			
			// 通过手机号机构企业信息
			// this.getPhoneqyxx()

		},
		methods: {
			// 获取企业信息
			getQyxx() {
				this.$u.api.queryjgqyxx({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('企业信息：', res)					
					let baseinfo = res.data.base_info.qyxx
					this.flowid = res.data.base_info.base.flow_id
					this.form = {
						companyName: baseinfo.qyxx_name,
						businessType: baseinfo.qyxx_type,
						businessStatus: baseinfo.qyxx_jyzt,
						businessAddress: baseinfo.qyxx_addr,
						detailAddress: baseinfo.qyxx_realaddr
					}
					this.introduction = baseinfo.qyxx_desc
					// logo
					this.PhotosListLogo = baseinfo.logo_img_uri[0].url
					this.photo_base_info_logo = baseinfo.logo_img_uri[0].imguri
					// 门头
					this.PhotosListTitle = baseinfo.door_img_uri[0].url
					this.photo_base_info_title = baseinfo.door_img_uri[0].imguri
					// 环境照
					this.photo_base_info_env = []
					this.PhotosList = []
					for(let i=0; i<baseinfo.in_img_uri.length; i++) {
						this.PhotosList.push(baseinfo.in_img_uri[i].url)
						this.photo_base_info_env.push(baseinfo.in_img_uri[i].imguri)
					}
					
				})
			},
			
			// 通过手机号机构企业信息
			getPhoneqyxx() {
				if (!util.isEmpty(this.loginPhone) && this.showStatus == 0) {
					this.$u.api.queryjguser({
						phoneno: this.loginPhone
					}).then(res => {
						console.log('入驻3-2:', res, this.loginPhone)
						// 修改信息
						const qyxx = res.data.base_info.qyxx
						this.form.companyName = qyxx.qyxx_name
						this.form.businessType = qyxx.qyxx_type
						this.form.businessStatus = qyxx.qyxx_jyzt
						this.form.businessAddress = qyxx.qyxx_addr
						this.form.detailAddress = qyxx.qyxx_realaddr
						this.introduction = qyxx.qyxx_desc
						this.PhotosListLogo = qyxx.logo_img_uri ///存储Logo
						this.PhotosListTitle = qyxx.door_img_uri ///存储门头照片
						this.PhotosList = [] ///存储门店环境照片0~5张
						this.photo_base_info_env = []
						if(qyxx.logo_img_uri.length != 0 || qyxx.door_img_uri != 0 || qyxx.in_img_uri != 0) {
							this.photo_base_info_logo = qyxx.logo_img_uri[0].imguri ///存储服务器返回图片的ID-Logo
							this.photo_base_info_title = qyxx.door_img_uri[0].imguri ///存储服务器返回图片的ID-title
							for (var i = 0; i < qyxx.in_img_uri.length; i++) {
								this.PhotosList.push(qyxx.in_img_uri[i].url)
								this.photo_base_info_env.push(qyxx.in_img_uri[i].imguri) ///存储服务器返回图片的ID-env,0-5张
							}						
						}
						this.showStatus = 1;
						console.log('入驻3:', this.PhotosList, this.photo_base_info_env,this.showStatus)
					})
				}
			},

			// 环境选择图片
			chooseImage(type) {
				uni.chooseImage({
					count: 1, // 最多选择9张
					sizeType: ['original', 'compressed'], // 可指定原图或压缩图
					sourceType: ['album', 'camera'], // 相册和相机
					success: (res) => {
						console.log('chooseImage:', res.tempFilePaths);
						// 将图片转换为Base64,添加一张就上传一张
						util.getPhotoBase64(res.tempFilePaths[0], base64 => {
							this.base64Data = base64
						})
						if(type == 'logo') {
							// 转换成功后上传logo
							this.uploadBase64("logo", "1")
							this.PhotosListLogo = res.tempFilePaths[0];
							console.log('chooseImage-PhotosListLogo:', this.PhotosListLogo);
						} else  if(type == 'title') {
							// 转换成功后上传logo
							this.uploadBase64("title", "1")
							this.PhotosListTitle = res.tempFilePaths[0];
							console.log('chooseImage-PhotosListTitle:', this.PhotosListTitle);
						} else {
							// 转换成功后上传 
							this.uploadBase64("env", "0")
							this.PhotosList = this.PhotosList.concat(res.tempFilePaths);
							console.log('chooseImage-PhotosList:', this.PhotosList);
						}
						
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},

			// 预览图片Logo
			previewImageLogo(index) {
				this.photo_prview_all = []
				this.photo_prview_all.push(this.PhotosListLogo)
				console.log('预览',this.photo_prview_all)
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.photo_prview_all, // 所有图片URL
					// indicator: "number", // 显示页码指示器
					// loop: true // 是否可循环预览
				});
			},
			
			// 预览图片title
			previewImageTitle(index) {
				this.photo_prview_all = []
				this.photo_prview_all.push(this.PhotosListTitle)
				console.log('预览',this.photo_prview_all)
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.photo_prview_all, // 所有图片URL
					// indicator: "number", // 显示页码指示器
					// loop: true // 是否可循环预览
				});
			},
			
			// 预览图片env
			previewImage(index) {
				this.photo_prview_all = []
				this.photo_prview_all = this.PhotosList
				console.log('预览',this.photo_prview_all)
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.photo_prview_all, // 所有图片URL
					// indicator: "number", // 显示页码指示器
					// loop: true // 是否可循环预览
				});
			},

			// 删除图片logo
			deleteImageLogo(index) {
				console.log('删除',index)
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.PhotosListLogo = '';
							this.photo_base_info_Logo = '';
							console.log('chooseImage-delete:', this.PhotosListLogo);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 删除图片title门头照片
			deleteImageTitle(index) {
				console.log('删除',index)
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.PhotosListTitle = '';
							this.photo_base_info_title = '';
							// console.log('chooseImage-delete:', this.PhotosListTitle);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			
			// 删除图片env图片
			deleteImage(index) {
				console.log('删除',index)
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.PhotosList.splice(index,1);
							this.photo_base_info_env.splice(index,1);
							// console.log('chooseImage-delete:', this.PhotosListTitle);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},

			// 上传Logo照片
			PhotoReadLogo(list, name) {
				const file = list[0]
				console.log("onchange:", list)
				// 处理新准备上传的照片文件（添加必要字段）
				const newFiles = list.map(item => ({
					url: item.url, // 临时路径
				}))
				console.log("onchange-1:", newFiles)
				this.PhotosListLogo = []
				this.PhotosListLogo = [...this.PhotosListLogo, ...newFiles];
				console.log("onchange-2:", this.PhotosListLogo)
				// 将图片转换为Base64
				util.getPhotoBase64(file.url, base64 => {
					// console.log('main-bser64', base64)
					this.base64Data = base64
					// 转换成功后上传
					this.uploadBase64('logo', "1")
				})
			},
			// 上传门头照片
			PhotoReadTitle(list, name) {
				const file = list[0]
				console.log("onchange:", list)
				// 处理新准备上传的照片文件（添加必要字段）
				const newFiles = list.map(item => ({
					url: item.url, // 临时路径
				}))
				console.log("onchange-1:", newFiles)
				this.PhotosListTitle = []
				this.PhotosListTitle = [...this.PhotosListTitle, ...newFiles];
				console.log("onchange-2:", this.PhotosListTitle)
				// 将图片转换为Base64
				util.getPhotoBase64(file.url, base64 => {
					// console.log('main-bser64', base64)
					this.base64Data = base64
					// 转换成功后上传
					this.uploadBase64('title', "2")
				})
			},

			// 上传多张环境照片
			PhotoReadEnv(list, name) {
				// this.doorPhotos = event.file;
				// const file = list[0]
				console.log("onchange:", list)
				// 处理新准备上传的照片文件（添加必要字段）
				const newFiles = list.map(item => ({
					url: item.url, // 临时路径
				}))
				console.log("onchange-1:", newFiles)
				this.PhotosList = []
				// this.PhotosList = [...this.PhotosList, ...newFiles];
				this.PhotosList = list
				console.log("onchange-2:", this.PhotosList)
				// 多张照片的上传放在提交是处理
			},


			// 上传Base64数据到服务器
			uploadBase64(type, restype) {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '上传中...'
				})
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('flowid'),
					"rescode": this.base64Data,
					"restype": restype,
					"resdesc": "上传照片"
				}).then(res => {
					console.log('uploadres:', res, type)
					if (type == 'logo') {
						this.photo_base_info_logo = res.data.base_info
						console.log('logo:', this.photo_base_info_logo)
					} else if (type == 'title') {
						this.photo_base_info_title = res.data.base_info
						console.log('title:', this.photo_base_info_title)
					} else {
						// 多张图显示
						// this.photo_base_info_env.push(res.data.base_info)
						// const newFiles = res.data.base_info.map(item => ({
						// 	url: item.url, // 临时路径
						// }))
						// this.photo_base_info_env = [...this.photo_base_info_env, ...res.data];

						this.photo_base_info_env.push(res.data.base_info);
						console.log('env:', this.photo_base_info_env)
					}

				})
			},

			// 删除Logo照片
			photoLogoDelete(event, index) {
				this.PhotosListLogo.splice(event, 1);
				this.photo_base_info_logo.splice(event, 1)
			},

			// 删除门头的一张照片
			photoTitleDelete(event, index) {
				this.PhotosListTitle.splice(event, 1);
				this.photo_base_info_title.splice(event, 1)
			},

			// 删除环境
			photoListDelete(event, index) {
				this.PhotoReadEnv.splice(event, 1);
				this.photo_base_info_env.splice(event, 1);
				console.log('photoListDelete:', this.PhotoReadEnv, this.photo_base_info_env)

			},

			// 显示经营类型弹窗
			isShowPicker(value) {
				if (value == 0) {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = ['有限责任公司', '股份有限公司', '个体工商户', '其他'];
					this.defaultSelector = [0];
				} else if (value == 1) {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = ['营业中', '暂停营业'];
					this.defaultSelector = [0];
				} else {
					this.NumberValue = value;
					this.mode = "region"
					// this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
					// this.defaultSelector = [0, 0, 0];
				}
				this.show = true
			},

			// 计算企业介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.introduction.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.introduction = this.introduction.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},

			// 选择确认
			confirm(e) {
				if (this.NumberValue == 0) {
					this.form.businessType = this.range[e[0]];
				} else if (this.NumberValue == 1) {
					this.form.businessStatus = this.range[e[0]];
				} else {
					this.form.businessAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},

			// 经营类型选择
			confirmBusinessType(e) {
				this.form.businessType = e.value[0].label;
				this.showBusinessTypePicker = false;
			},

			// 地址选择
			confirmAddress(e) {
				const [province, city, district] = e.value;
				this.form.businessAddress = `${province.name}-${city.name}-${district.name}`;
				this.showAddressPicker = false;
			},

			// 上一步
			handlePrev() {
				this.showStatus = 0
				uni.navigateBack();

			},

			// 提交
			handleSubmit() {
				// 提交前先转base64,并上传图片（此处只上传环境的多张照片）
				// 每次提交前先清空环境照片的id
				// this.photo_base_info_env = []
				// console.log('main-bser64-1', this.PhotosList[0].url)
				// for (var i = 0; i < this.PhotosList.length; i++) {
				// 	let listurl = this.PhotosList[i].url
				// 	console.log('main-bser64', listurl)
				// 	util.getPhotoBase64(listurl, base64 => {

				// 		this.base64Data = base64
				// 		// 转换成功后上传
				// 		this.uploadBase64('env')

				// 	})
				// }	
				if(this.enterCode === 'mine') {
					// 修改
					this.$u.api.putjgqyxx({
						"flowid": this.flowid,
						"qyxxname": this.form.companyName,
						"qyxxtype": this.form.businessType,
						"logoimguri": this.photo_base_info_logo,
						"doorimguri": this.photo_base_info_title,
						"inimguri": this.photo_base_info_env,
						"qyxxaddr": this.form.businessAddress,
						"qyxxrealaddr": this.form.detailAddress,
						"qyxxjyzt": this.form.businessStatus,
						"qyxxdesc": this.introduction,
						"qyxxygfl": "",
					}).then(res => {
						console.log('修改企业信息：', res)
						uni.switchTab({
							url: '/pages/instTabBar/mine'
						})	
					})
					
				}	else {
					// 添加
					this.$u.api.postjgqyxx({
						"flowid": uni.getStorageSync('flowid'),
						"qyxxname": this.form.companyName,
						"qyxxtype": this.form.businessType,
						"logoimguri": this.photo_base_info_logo,
						"doorimguri": this.photo_base_info_title,
						"inimguri": this.photo_base_info_env,
						"qyxxaddr": this.form.businessAddress,
						"qyxxrealaddr": this.form.detailAddress,
						"qyxxjyzt": this.form.businessStatus,
						"qyxxdesc": this.introduction,
						"qyxxygfl": "",
					}).then(res => {
						this.showStatus = 0
						console.log('提交企业信息：', res)
						uni.navigateTo({
							url: '/pages/Institution/settleIn/settleInFinish'
						});
					})
				}
							
							


			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		background-color: #F1F7F7;
		min-height: 100vh;
		
		//、、、、、、、、、、、、、、、
		// 图片上传image
		/* 上传区域 */
		.upload-area {
			width: 200rpx;
			height: 200rpx;
			border: 1px dashed #ddd;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
			background-color: #f9f9f9;
		}
		
		/* 预览图片样式 */
		.preview-image {
			width: 100%;
			height: 100%;
		}
		
		/* 上传按钮样式 */
		.upload-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #999;
		}
		
		.upload-text {
			font-size: 28rpx;
			margin-top: 10rpx;
		}
		
		.upload-tip {
			font-size: 22rpx;
			color: #ccc;
			margin-top: 20rpx;
		}
		
		/* 删除按钮 */
		.delete-btn {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
		}
		

		//环境、、、、、、、、、、、、、、、、、
		.upload-btn {
			width: 200rpx;
			height: 200rpx;
			border: 1px solid #b8b8b8;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #737373;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}

		.image-item {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}

		.delete-btn {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #ff5a5f;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
		}



		// 、、、、、、、、、、、、、、、、、、、

		.required {
			color: #f56c6c;
		}

		// .header {
		// 	margin-bottom: 40rpx;

		// 	.title {
		// 		font-size: 36rpx;
		// 		font-weight: bold;
		// 		color: #333;
		// 	}
		// }

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					// font-size: 36rpx;
					// font-weight: bold;
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}


		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}

			.upload-section {
				margin-bottom: 40rpx;

				.upload-title {
					font-size: 28rpx;
					color: #606266;
					margin-bottom: 16rpx;
					display: block;

					// .required {
					// 	color: #f56c6c;
					// }
				}

				.upload-desc {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>